---
const plans = [
  {
    name: "入门版",
    price: 29,
    description: "适合小型团队和初创公司",
    features: [
      "最多5名团队成员",
      "10GB存储空间",
      "基础分析功能",
      "24/7邮件支持",
      "API访问"
    ],
    cta: "开始免费试用",
    popular: false,
    color: "primary"
  },
  {
    name: "专业版",
    price: 79,
    description: "适合成长中的企业",
    features: [
      "最多20名团队成员",
      "50GB存储空间",
      "高级分析功能",
      "优先支持",
      "API访问",
      "自定义集成",
      "团队协作工具"
    ],
    cta: "开始免费试用",
    popular: true,
    color: "secondary"
  },
  {
    name: "企业版",
    price: 199,
    description: "适合有复杂需求的大型组织",
    features: [
      "无限团队成员",
      "500GB存储空间",
      "企业级分析功能",
      "专属客户经理",
      "API访问",
      "自定义集成",
      "团队协作工具",
      "高级安全功能",
      "自定义品牌"
    ],
    cta: "联系销售",
    popular: false,
    color: "accent"
  }
];
---

<section id="pricing" class="section bg-gray-50 dark:bg-gray-800/50">
  <div class="container-custom">
    <div class="text-center max-w-3xl mx-auto mb-16">
      <span class="inline-block px-4 py-1 rounded-full bg-accent-100 dark:bg-accent-900 text-accent-600 dark:text-accent-300 font-medium text-sm mb-4">
        价格方案
      </span>
      <h2 class="mb-6 text-gray-900 dark:text-white">简单透明的价格</h2>
      <p class="text-gray-600 dark:text-gray-300">
        选择最适合您业务的方案。所有方案均包含14天免费试用期。
      </p>
    </div>
    
    <div class="grid md:grid-cols-3 gap-8">
      {plans.map((plan, index) => (
        <div 
          class={`card p-6 border ${plan.popular ? `border-${plan.color}-500 dark:border-${plan.color}-400` : 'border-gray-200 dark:border-gray-700'} slide-up relative`}
          style={`animation-delay: ${index * 150}ms`}
        >
          {plan.popular && (
            <div class={`absolute top-0 right-0 bg-${plan.color}-500 text-white px-4 py-1 text-sm font-medium rounded-bl-lg rounded-tr-lg`}>
              最受欢迎
            </div>
          )}
          
          <h3 class="text-xl font-semibold mb-2 text-gray-900 dark:text-white">{plan.name}</h3>
          <div class="mb-4">
            <span class="text-4xl font-bold text-gray-900 dark:text-white">${plan.price}</span>
            <span class="text-gray-500 dark:text-gray-400">/月</span>
          </div>
          <p class="text-gray-600 dark:text-gray-300 mb-6">{plan.description}</p>
          
          <ul class="space-y-3 mb-8">
            {plan.features.map(feature => (
              <li class="flex items-start">
                <svg class={`w-5 h-5 text-${plan.color}-500 mr-2 flex-shrink-0 mt-0.5`} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                  <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path>
                </svg>
                <span class="text-gray-600 dark:text-gray-300">{feature}</span>
              </li>
            ))}
          </ul>
          
          <a 
            href="#signup" 
            class={`w-full btn ${plan.popular ? `bg-${plan.color}-600 hover:bg-${plan.color}-700 text-white focus:ring-${plan.color}-500` : 'btn-outline'}`}
          >
            {plan.cta}
          </a>
        </div>
      ))}
    </div>
    
    <div class="mt-12 text-center">
      <p class="text-gray-600 dark:text-gray-300 mb-2">需要针对您特定需求的定制方案？</p>
      <a href="/contact" class="text-primary-600 dark:text-primary-400 font-medium hover:underline">联系我们的销售团队</a>
    </div>
  </div>
</section>
